<template>
  <div class="intent-mining-page">
    <div class="title">
      <div class="iconTip">用户明细</div>
    </div>
    <div class="search">
      <div class="search-wrap">
        <div class="search-item" id="width-item">
          <span class="item-title">月份</span>
          <a-month-picker
            allowClear
            show-time
            format="YYYY-MM"
            valueFormat="YYYY-MM"
            placeholder="请选择"
            v-model="searchParams.month"
            class="my-input"
            @change="monthChange"
            :disabled-date="monthDisabledDate"
          />
        </div>
        <div class="search-item">
          <span class="item-title">账号</span>
          <a-input
            allowClear
            placeholder="请输入"
            v-model="searchParams.userName"
            class="my-input"
          ></a-input>
        </div>
        <div class="search-item">
          <span class="item-title">姓名</span>
          <a-input
            allowClear
            placeholder="请输入"
            v-model="searchParams.realName"
            class="my-input"
          ></a-input>
        </div>
        <div class="search-item">
          <span class="item-title">mail</span>
          <a-input
            allowClear
            placeholder="请输入"
            v-model="searchParams.mail"
            class="my-input"
          ></a-input>
        </div>
        <template v-if="expandVisible">
          <div class="search-item">
            <span class="item-title">省分</span>
            <a-select
              allowClear
              show-search
              placeholder="请选择"
              v-model="searchParams.provName"
              option-filter-prop="children"
              :filter-option="filterOption"
              class="my-input"
              @change="provChange"
              :get-popup-container="getPopupContainer"
            >
              <a-select-option
                v-for="key in provOption"
                :key="key.key"
                :value="key.title"
              >
                {{ key.title }}
              </a-select-option>
            </a-select>
          </div>
          <div class="search-item">
            <span class="item-title">地市</span>
            <a-select
              allowClear
              show-search
              placeholder="请选择"
              v-model="searchParams.cityName"
              option-filter-prop="children"
              :filter-option="filterOption"
              class="my-input"
              :get-popup-container="getPopupContainer"
            >
              <a-select-option
                v-for="key in cityOption"
                :key="key.key"
                :value="key.title"
              >
                {{ key.title }}
              </a-select-option>
            </a-select>
          </div>
          <div class="search-item">
            <span class="item-title">取数菜单</span>
            <a-select
              allowClear
              placeholder="请选择"
              v-model="searchParams.dialogFlag"
              class="my-input"
            >
              <a-select-option value="0">规则分析</a-select-option>
              <a-select-option value="1">AI取数</a-select-option>
            </a-select>
          </div>
          <div class="search-item">
            <span class="item-title">问题描述</span>
            <a-input
              allowClear
              placeholder="请输入"
              v-model="searchParams.title"
              class="my-input"
            ></a-input>
          </div>
          <div class="search-item">
            <span class="item-title">租户ID</span>
            <a-input
              allowClear
              placeholder="请输入"
              v-model="searchParams.tenantId"
              class="my-input"
            ></a-input>
          </div>
          <div class="search-item">
            <span class="item-title">租户名称</span>
            <a-input
              allowClear
              placeholder="请输入"
              v-model="searchParams.tenantName"
              class="my-input"
            ></a-input>
          </div>
          <div class="search-item search-item-date">
            <span class="item-title">日期</span>
            <div class="my-input date-select">
              <a-date-picker
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
                v-model="searchParams.startDate"
                class="date-item"
                :disabled-date="startDateDisabledDate"
                :disabled-time="startDateDisabledTime"
                @change="timeChange"
              />
              ~
              <a-date-picker
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
                v-model="searchParams.endDate"
                class="date-item"
                :disabled-date="endDateDisabledDate"
                :disabled-time="endDateDisabledTime"
                @change="timeChange"
              />
            </div>
          </div>
        </template>
        <div class="search-item" @click="expandedFun">
          <div class="item-title expand" v-show="!expandVisible">
            <span>更多</span>
            <a-icon type="down" />
          </div>
          <div class="item-title expand" v-show="expandVisible">
            <span>收起</span>
            <a-icon type="up" />
          </div>
        </div>
        <div class="search-item my-btn">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button @click="reSet">重置</a-button>
        </div>
      </div>
    </div>
    <MyTable
      :data-source="tableData"
      :columns="columns"
      row-key="id"
      :slotName="['dialogFlag', 'cityName']"
    >
      <template #dialogFlag="scope">
        <span>
          {{ scope.data.text === "0" ? "规则分析" : "AI取数" }}
        </span>
      </template>
      <template #cityName="scope">
        <span>
          {{ scope.data.text || "--" }}
        </span>
      </template>
      <template #operation="scope">
        <span class="operate">
          <span class="operate-item" @click="previewFormOpen(scope)">
            查看详情
          </span>
        </span>
      </template>
    </MyTable>
    <div class="table-paging">
      <a-pagination
        :current="pageNo"
        :total="total"
        :show-total="(total) => `共有 ${total} 条`"
        :page-size-options="['15', '20', '30', '50']"
        :page-size="pageSize"
        show-quick-jumper
        show-size-changer
        @change="change"
        @showSizeChange="change"
      />
    </div>
    <a-modal
      v-model="previewVisible"
      :footer="null"
      title="查看指标详情"
      centered
      width="70%"
    >
      <PreviewModal :formData="previewForm" />
    </a-modal>
  </div>
</template>

<script setup>
import MyTable from "@/components/common/index-table.vue";
import PreviewModal from "@/components/common/user-detail-modal";
import moment from "moment";
import { onMounted, onUnmounted, ref, watch } from "vue";
import { userDetail } from "@/store/user-detail";
import { storeToRefs } from "pinia";
const store = userDetail();
const {
  tableData,
  columns,
  pageNo,
  pageSize,
  total,
  searchParams,
  provOption,
  cityOption,
} = storeToRefs(store);
const change = (page, pageSize1) => {
  pageNo.value = page;
  pageSize.value = pageSize1;
};
const { getTbodyData, search, reSet, getRegion } = store;
watch(
  [pageNo, pageSize],
  async () => {
    await getTbodyData();
  },
  { immediate: false }
);
function filterOption(input, option) {
  return (
    option.componentOptions.children[0].text
      .toLowerCase()
      .indexOf(input.toLowerCase()) >= 0
  );
}
const expandVisible = ref(false);
const previewVisible = ref(false);
const previewForm = ref({});
function previewFormOpen(scope) {
  let obj = { ...scope.data.record };
  previewForm.value = { ...obj };
  previewVisible.value = true;
}
const listenResize = () => {
  if (!expandVisible.value) return;
  const width = document.getElementById("width-item").offsetWidth;
  const items = document.querySelectorAll(".search-wrap > div");
  const lastItem = items[items.length - 1];
  const columnCount = Math.floor(
    document.querySelector(".search-wrap").offsetWidth / width
  );
  lastItem.style.gridColumn = `span ${
    columnCount - (items.length % columnCount)
  }`;
};
function getPopupContainer(trigger) {
  return trigger.parentElement.parentElement;
}
const provChange = () => {
  searchParams.value.cityName = undefined;
};
const timeChange = () => {
  searchParams.value.month = "";
};
const monthChange = () => {
  searchParams.value.startDate = "";
  searchParams.value.endDate = "";
};
// 生成数字范围数组
function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function monthDisabledDate(current) {
  return current && current > moment().endOf("month");
}
// 禁用开始日期的日期部分
function startDateDisabledDate(current) {
  if (!searchParams.value.endDate) {
    return current && current > moment().endOf("day");
  }
  return current && current > moment(searchParams.value.endDate).endOf("day");
}

// 禁用开始日期的时间部分
function startDateDisabledTime(current) {
  if (!searchParams.value.endDate) return {};
  const endDate = moment(searchParams.value.endDate);

  // 当选择日期与结束日期相同时，处理时间禁用
  if (current && current.isSame(endDate, "day")) {
    return {
      disabledHours: () => range(0, 24).splice(endDate.hour() + 1),
      disabledMinutes: (selectedHour) => {
        if (selectedHour === endDate.hour()) {
          return range(0, 60).splice(endDate.minute() + 1);
        }
        return [];
      },
      disabledSeconds: (selectedHour, selectedMinute) => {
        if (
          selectedHour === endDate.hour() &&
          selectedMinute === endDate.minute()
        ) {
          return range(0, 60).splice(endDate.second() + 1);
        }
        return [];
      },
    };
  }
  return {};
}

// 禁用结束日期的日期部分
function endDateDisabledDate(current) {
  if (!searchParams.value.startDate) {
    return current && current > moment().endOf("day");
  }
  return (
    current &&
    current < moment(searchParams.value.startDate).startOf("day") &&
    current > moment().endOf("day")
  );
}

// 禁用结束日期的时间部分
function endDateDisabledTime(current) {
  if (!searchParams.value.startDate) return {};
  const startDate = moment(searchParams.value.startDate);

  // 当选择日期与开始日期相同时，处理时间禁用
  if (current && current.isSame(startDate, "day")) {
    return {
      disabledHours: () => range(0, startDate.hour()),
      disabledMinutes: (selectedHour) => {
        if (selectedHour === startDate.hour()) {
          return range(0, startDate.minute());
        }
        return [];
      },
      disabledSeconds: (selectedHour, selectedMinute) => {
        if (
          selectedHour === startDate.hour() &&
          selectedMinute === startDate.minute()
        ) {
          return range(0, startDate.second());
        }
        return [];
      },
    };
  }
  return {};
}
function expandedFun() {
  expandVisible.value = !expandVisible.value;
  setTimeout(() => {
    listenResize();
  });
}
onMounted(async () => {
  listenResize();
  window.addEventListener("resize", listenResize);
  await getRegion();
  await getTbodyData();
});
onUnmounted(() => {
  window.removeEventListener("resize", listenResize);
});
</script>

<style scoped lang="less">
.intent-mining-page {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 14px;
  color: #464c5b;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(250, 251, 255, 1) 0%,
    rgba(243, 245, 251, 1) 99%
  );
  .search {
    width: 100%;
    margin: 15px 0;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
  }
  .btn {
    padding-left: 20px;
    display: flex;
    column-gap: 20px;
  }
}
.title {
  display: flex;
  width: 80%;
  position: relative;
  align-self: center;
  color: rgba(36, 104, 242, 1);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  margin-left: 140px;
  border-bottom: 1px rgba(36, 104, 242, 1) solid;

  .iconTip {
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
      sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    color: #4e5969;
    text-align: center;
    width: 94%;
  }
  .img {
    margin-left: auto;
    color: #2f54eb;
    width: 28px;
    height: 26px;
  }
}
.table-paging {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.search-wrap {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
  grid-auto-flow: row dense;
  .search-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    .item-title {
      white-space: nowrap;
      width: 60px;
      text-align: right;
    }
    .my-input {
      flex: 1;
    }
    .date-select {
      display: flex;
      align-items: center;
      column-gap: 10px;
      .date-item.ant-calendar-picker {
        min-width: unset !important;
        flex: 1;
      }
    }
  }
  .search-item-date {
    grid-column: span 2;
  }
  .my-btn {
    display: flex;
    justify-content: flex-end;
  }
}
/deep/ .ant-select-dropdown-menu {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
.expand {
  color: #2f54eb;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  cursor: pointer;
}
/deep/ .ant-modal-title {
  font-weight: 700;
}
</style>
